import { createBrowserRouter, Outlet } from 'react-router-dom';
import App from '../App';
import Home from '../pages/Home';
import About from '../pages/About';
import Login from '../pages/Login';
import NotFound from '../pages/NotFound';
import EditorPage from '../pages/Editor';
import ProtectedRoute from './ProtectedRoute';

// 受保护的路由组件
const ProtectedLayout = () => <ProtectedRoute><Outlet /></ProtectedRoute>;

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      // 受保护的路由组
      {
        element: <ProtectedLayout />,
        children: [
          {
            path: '',
            element: <Home />,
          },
          {
            path: 'editor',
            element: <EditorPage />,
          }
        ],
      },
      // 公共路由
      {
        path: 'login',
        element: <Login />,
      },
      {
        path: 'about',
        element: <About />,
      },
      // 404路由
      {
        path: '*',
        element: <NotFound />,
      },
    ],
  },
]);